<template>
  <ul class="img-list">
    <li class="img-item" v-for="(item,i) in ImageList" :key="i">
      <div class="img-box">
          <img :src="item.src" alt="">
          <p class="title only-1">{{item.title}}</p>
            <router-link to>详情></router-link>
      </div>
      
    </li>
  </ul>
</template>

<script>
export default {
    props:{
        ImageList:Array
    },
    data(){
        return{

        }
    }
};
</script>

<style lang="scss" scoped>
.img-list {
  width: 100%;
  .img-item {
    display: inline-block;
    position: relative;
    width: 285px;
    margin-right: 20px;
    margin-bottom:20px;
    overflow: hidden;
    &:nth-of-type(4n) {
      margin-right: 0;
    }
    .img-box {
      position: relative;
      width: 100%;
      height: 214px;
      overflow: hidden;
      // >img{
      //   transition: all 1s;
      // }
      // &:hover img{
      //   transform: scale(1.3);
      // }
    }
    .title {
      position: absolute;
      left: 0x;
      bottom: 10px;
      padding:0 10px;
      width: 100%;
      color: #fff;
      font-size: 16px;
      box-sizing: border-box;
    }
    a {
      display: none;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 64px;
      height: 24px;
      background: rgba(229, 184, 127, 0.8);
      border-radius: 10px;
      font-size: 12px;
      line-height: 24px;
      color: #fff;
      text-align: center;
    }
    &:hover {
      a {
        display: block;
      }
    }
  }
}

</style>